<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.min.js-->
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    <button @click="update">update</button>
    <h1 id="h3">{{message}}</h1>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"天王盖地虎"
        },
        methods: {
            show(){
                console.log("执行show方法")
            },
            update(){
                this.message = "小鸡炖蘑菇"
            }
        },
        // ##创建时的四个事件
        beforeCreate(){//创建之前
            // ##第一个被执行的钩子方法:实例被创建出来之前执行
            console.log(this.message)//因为这个阶段什么也没做,所以输出会报错
            // ##TypeError: this.show is not a function
            this.show()//因为这个阶段什么也没做,所以输出会报错
            // ##beforeCreate执行时,data和methods中的数据都还没有初始化
        },
        created(){//创建完成
            // ##第二个被执行的钩子方法
            console.log(this.message)// 输出##天王盖地虎
            this.show()// ##执行show方法
            // ##create执行时,data和methods都已经被初始化好了!
            // ##如果要调用methods中的方法,或者操作data中的数据,最早,只能在created中操作
        },
        beforeMount(){//渲染之前
            // ##第三个被执行的钩子方法
            console.log(document.getElementById("h3").innerText)// 输出##{{message}}
            // ##beforeMount执行时,模版已经在内存中编辑完成了,但尚未被渲染到页面中
        },
        mounted(){//渲染完成
            // ##第四个被执行的钩子方法
            console.log(document.getElementById("h3").innerText)// 输出##天王盖地虎
            // ##内存中的模版已经渲染到页面,用户已经可以看到内容
        },
        // ##运行中(一般是事件触发时)的两个事件,
        beforeUpdate(){//更新之前
            // ##数据更新的前一刻
            debugger// ##必须加上debugger调试,不然在页面中看不到效果
            console.log("界面显示的内容:"+document.getElementById("h3").innerText)
            console.log("data中的message数据时:"+this.message)
            // ##beforeUpdate执行时,内存中的数据已更新,但是页面尚未被渲染
        },
        updated(){//更新后
            // ##更新后
            debugger
            console.log("界面显示的内容:"+document.getElementById("h3").innerText)
            console.log("data中的message数据是:"+this.message)
            // ##updated执行时,内存中的数据已更新,并且页面已被渲染
        },
        beforeDestroy(){
            console.log("销毁前...")
        },
        destroyed(){
            // ##当页面渲染完成之后,最后会把vue对象进行销毁
            console.log("销毁...")
        }
    })
</script>
</html>